<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>统计分析</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        .chart-container {
            height: 400px;
        }
        .stat-card {
            transition: transform 0.2s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="row mb-4">
            <div class="col">
                <h2>统计分析</h2>
            </div>
            <div class="col-auto">
                <div class="btn-group">
                    <button type="button" class="btn btn-outline-primary" onclick="changeTimeRange(7)">
                        最近7天
                    </button>
                    <button type="button" class="btn btn-outline-primary" onclick="changeTimeRange(30)">
                        最近30天
                    </button>
                    <button type="button" class="btn btn-outline-primary" onclick="changeTimeRange(90)">
                        最近90天
                    </button>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="row g-4 mb-4">
            <div class="col-md-3">
                <div class="card stat-card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0">总销售额</h6>
                                <h2 class="mb-0" th:text="${'¥' + #numbers.formatDecimal(totalSales, 1, 2)}">
                                    ¥0.00
                                </h2>
                            </div>
                            <div>
                                <i class="fas fa-chart-line fa-2x"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <small th:text="${'同比增长 ' + salesGrowth + '%'}" 
                                   th:class="${salesGrowth >= 0 ? 'text-success' : 'text-danger'}">
                                同比增长 0%
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0">订单数量</h6>
                                <h2 class="mb-0" th:text="${totalOrders}">0</h2>
                            </div>
                            <div>
                                <i class="fas fa-shopping-cart fa-2x"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <small th:text="${'日均 ' + avgDailyOrders + ' 单'}">日均 0 单</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0">活跃用户</h6>
                                <h2 class="mb-0" th:text="${activeUsers}">0</h2>
                            </div>
                            <div>
                                <i class="fas fa-users fa-2x"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <small th:text="${'新增 ' + newUsers + ' 人'}">新增 0 人</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0">平均客单价</h6>
                                <h2 class="mb-0" th:text="${'¥' + #numbers.formatDecimal(avgOrderAmount, 1, 2)}">
                                    ¥0.00
                                </h2>
                            </div>
                            <div>
                                <i class="fas fa-receipt fa-2x"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <small th:text="${'环比 ' + avgOrderGrowth + '%'}"
                                   th:class="${avgOrderGrowth >= 0 ? 'text-success' : 'text-danger'}">
                                环比 0%
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row g-4">
            <!-- 销售趋势 -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">销售趋势</h5>
                    </div>
                    <div class="card-body">
                        <div id="salesTrendChart" class="chart-container"></div>
                    </div>
                </div>
            </div>

            <!-- 商品分类占比 -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">商品分类占比</h5>
                    </div>
                    <div class="card-body">
                        <div id="categoryPieChart" class="chart-container"></div>
                    </div>
                </div>
            </div>

            <!-- 热销商品 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">热销商品</h5>
                    </div>
                    <div class="card-body">
                        <div id="topProductsChart" class="chart-container"></div>
                    </div>
                </div>
            </div>

            <!-- 地区分布 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">地区分布</h5>
                    </div>
                    <div class="card-body">
                        <div id="regionMapChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:inline="javascript">
        // 获取后端数据
        const salesTrendData = /*[[${salesTrendData}]]*/ [];
        const categoryData = /*[[${categoryData}]]*/ [];
        const topProductsData = /*[[${topProductsData}]]*/ [];
        const regionData = /*[[${regionData}]]*/ [];

        // 初始化图表
        const salesTrendChart = echarts.init(document.getElementById('salesTrendChart'));
        const categoryPieChart = echarts.init(document.getElementById('categoryPieChart'));
        const topProductsChart = echarts.init(document.getElementById('topProductsChart'));
        const regionMapChart = echarts.init(document.getElementById('regionMapChart'));

        // 销售趋势图配置
        salesTrendChart.setOption({
            title: {
                text: '销售趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['销售额', '订单数']
            },
            xAxis: {
                type: 'category',
                data: salesTrendData.map(item => item.date)
            },
            yAxis: [
                {
                    type: 'value',
                    name: '销售额',
                    axisLabel: {
                        formatter: '¥{value}'
                    }
                },
                {
                    type: 'value',
                    name: '订单数',
                    axisLabel: {
                        formatter: '{value}单'
                    }
                }
            ],
            series: [
                {
                    name: '销售额',
                    type: 'line',
                    data: salesTrendData.map(item => item.amount)
                },
                {
                    name: '订单数',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: salesTrendData.map(item => item.orders)
                }
            ]
        });

        // 商品分类占比图配置
        categoryPieChart.setOption({
            title: {
                text: '商品分类占比'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            series: [
                {
                    type: 'pie',
                    radius: '70%',
                    data: categoryData.map(item => ({
                        name: item.name,
                        value: item.value
                    })),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });

        // 热销商品图配置
        topProductsChart.setOption({
            title: {
                text: '热销商品TOP10'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: topProductsData.map(item => item.name)
            },
            series: [
                {
                    type: 'bar',
                    data: topProductsData.map(item => item.sales)
                }
            ]
        });

        // 地区分布图配置
        regionMapChart.setOption({
            title: {
                text: '地区分布'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}单'
            },
            visualMap: {
                min: 0,
                max: Math.max(...regionData.map(item => item.value)),
                text: ['高', '低'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#D7E9FF', '#1890FF']
                }
            },
            series: [
                {
                    type: 'map',
                    map: 'china',
                    data: regionData.map(item => ({
                        name: item.name,
                        value: item.value
                    }))
                }
            ]
        });

        // 监听窗口大小变化，调整图表大小
        window.addEventListener('resize', () => {
            salesTrendChart.resize();
            categoryPieChart.resize();
            topProductsChart.resize();
            regionMapChart.resize();
        });

        // 切换时间范围
        function changeTimeRange(days) {
            window.location.href = `/admin/statistics?days=${days}`;
        }
    </script>
</body>
</html> 